<template>
  <div class="header-bar">
    <nut-searchbar class="farmland-search" v-model="state.canopyName" placeholder="请输入农田名称">
      <template v-slot:leftout>
        <nut-menu class="farmland-select" title-icon="rect-down">
          <nut-menu-item
            v-model="state.optionsListValue"
            @change="handleChange"
            :options="state.optionsList"
          />
        </nut-menu>
      </template>
      <template v-slot:leftin>
        <nut-icon size="14" name="search2"></nut-icon>
      </template>
      <template v-slot:rightout> <div class="search-bottom" @click="search">搜索</div></template>
    </nut-searchbar>
  </div>
  <div style="margin-top: 60px" v-if="state.canopiesList.length > 0">
    <div
      class="farmland-card van-hairline--bottom"
      v-for="(item, index) in state.canopiesList"
      :key="item.id"
      @click="farmlandDetailClick(item.id)"
    >
      <div class="farmland-card__left">
        <img
          :src="
            item.fileUpload?.fileUrl
              ? 'https://fmzk.harvest-code.com/api' + item.fileUpload?.fileUrl
              : dfimage
          "
          alt=""
        />
      </div>
      <div class="farmland-card__right">
        <div class="farmland-card__right__title">{{ item.canopyName }}</div>
        <div class="farmland-card__right__text">
          {{ item.cultivars?.name }} {{ item.crops?.name }}({{
            item.plantingPlans?.plantingStubble
          }})
        </div>
        <div class="farmland-card__right__desc">
          定植日期：{{ item.plantingPlans?.plantingTime }}
        </div>
      </div>
    </div>
  </div>

  <nut-empty v-else description="无数据"></nut-empty>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { ref, onMounted, reactive } from 'vue'
import { useReachBottom, usePullDownRefresh } from '@/hooks/life'
import { useTabItemTap } from '@tarojs/taro'
import { canopiesListData, officeListData } from '@/services/apis/canopies'
const dfimage = require('@/assets/icons/dfimage.png')
const searchValue = ref('')
const state = reactive({
  optionsList: [{ text: '全部', value: 0 }],
  optionsListValue: '',
  canopiesList: [],
  pageNo: 1,
  pageSize: 10,
  alertType: '',
  count: 0,
  canopyName: '',
  officeCode: ''
})
onMounted(() => {
  init()
})
useTabItemTap(() => {
  init()
})
const init = () => {
  state.canopiesList = []
  getList()
  officeListData().then(data => {
    state.optionsList = [{ text: '全部', value: '' }]
    if ((data.result = 'true' && data.data.length > 0)) {
      var list = data.data
      list.forEach(item => {
        state.optionsList.push({
          text: item.fullName,
          value: item.id
        })
      })
    }
  })
}
const getList = () => {
  canopiesListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize,
    canopyName: state.canopyName,
    officeCode: state.officeCode
  }).then(data => {
    if (data.result == 'true' && data.data.list) {
      state.canopiesList = [].concat(state.canopiesList, data.data.list)
      state.count = data.data.count
    }
  })
}
const handleChange = val => {
  state.canopiesList = []
  state.pageNo = 1
  state.officeCode = val
  getList()
}

// const goSearchPage = () => {
//   Taro.navigateTo({ url: '/pages/search/index' })
// }

const farmlandDetailClick = id => {
  Taro.navigateTo({ url: `/pagesSub/farmlandDetail/index?id=${id}` })
}

const search = () => {
  state.canopiesList = []
  state.pageNo = 1
  getList()
}

usePullDownRefresh(() => {
  state.canopiesList = []
  state.pageNo = 1
  getList()
})
useReachBottom(() => {
  if (state.pageNo * state.pageSize < state.count) {
    state.pageNo++
    getList()
  }
})
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$card-left-border-radius: 6px;
.farmland-search {
  .nut-searchbar__search-input {
    padding: 3px 20px 3px 10px;
    height: 38px;
    border-radius: 19px 0  0 19px;
    background: #F8F8F8;
    font-size: 14px;
    .nut-searchbar__input-bar {
      min-width: 80px;
    }
  }
  .nut-searchbar__right-search-icon {
        margin-left: 0;
        padding: 0 10px;
        width: 60px;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        color: #525252;
        background: #F8F8F8;
        border-radius: 0 19px 19px 0;
  }
  .search-bottom{
    position: relative;
    &::before{
        content: '';
        position: absolute;
        top: 50%;
        left: -20px;
        height: 18px;
        border-left: 1px solid rgba(165, 165, 165, 0.5);
        transform: translateY(-50%);
    }
  }

   .nut-menu__bar {
     font-size: 14px;
     min-width: 60px;
     box-shadow: none;
    .nut-menu__title-icon {
        float: right;
    }
    .nut-menu__item {
       padding-right:10px;
      .nut-menu__title {
        .nut-menu__title-text {
          padding-left: 0;
          padding-right: 0;
          width: 60px;
          overflow: hidden;
        }
      }
    }
  }
}
.farmland-card {
  margin: 0 18px;
  padding: 10px 0;
  display: flex;
  .farmland-card__left {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-color: $card-left-background-color;
    border-radius: $card-left-border-radius;
    overflow: hidden;
    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .farmland-card__right {
    flex: 1;
    padding: 0 0 0 16px;
    .farmland-card__right__title {
      @include multi-ellipsis(1);
      line-height: 1.5;
      font-size: $font-size-3;
      font-weight: 400;
    }
    .farmland-card__right__text{
      color: #333333;
      @include multi-ellipsis(2);
      padding: 3px 0 0 0;
      font-size: $font-size-1;
    }
    .farmland-card__right__desc {
      color: #666666;
      @include multi-ellipsis(2);
      padding: 3px 0 0 0;
      font-size: $font-size-0;
    }
  }
}
</style>
